<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板材/板带重量计算器</title>
    <style>
        body {font-family: '微软雅黑'; max-width: 800px; margin: 20px auto; padding: 20px; background: #f5f7fa;}
        .calculator {background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);}
        .tabs {display: flex; margin-bottom: 20px; border-bottom: 2px solid #eee;}
        .tab {padding: 10px 20px; cursor: pointer; transition: all 0.3s;}
        .tab.active {background: #007bff; color: white; border-radius: 5px 5px 0 0;}
        .calc-section {display: none;}
        .calc-section.active {display: block;}
        input, select {width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ddd; border-radius: 6px;}
        button {background: #007bff; color: white; border: none; padding: 12px; border-radius: 6px; cursor: pointer; width: 100%;}
        #result {margin-top: 20px; padding: 15px; background: #e9f5ff; border-radius: 8px;}
    </style>
</head>
<body>
    <div class="calculator">
        <h2>金属材料重量计算器</h2>
        <div class="tabs">
            <div class="tab active" onclick="switchTab('plate')">板材计算</div>
            <div class="tab" onclick="switchTab('strip')">板带计算</div>
        </div>

        <!-- 板材计算模块 -->
        <div id="plateSection" class="calc-section active">
            <h3>板材重量计算</h3>
            <div>
                <label>面积(m²):</label>
                <input type="number" id="area" step="0.01" required>
            </div>
            <div>
                <label>板厚(mm):</label>
                <input type="number" id="thickness" value="1.5" step="0.1">
            </div>
            <div>
                <label>材质:</label>
                <select id="material">
                    <option value="7.93">304不锈钢</option>
                    <option value="7.92">镀锌板</option>
                    <option value="7.85">碳钢</option>
                    <option value="7.98">316L不锈钢</option>
                </select>
            </div>
            <button onclick="calculatePlate()">计算板材重量</button>
        </div>

        <!-- 板带计算模块 -->
        <div id="stripSection" class="calc-section">
            <h3>不锈钢板带计算</h3>
            <div>
                <label>长度(米):</label>
                <input type="number" id="length" step="0.1" required>
            </div>
            <div>
                <label>规格选择:</label>
                <select id="stripType" onchange="updateStripSize()">
                    <option value="4.0">4.0T×62mm</option>
                    <option value="5.0">5.0T×70mm</option>
                </select>
            </div>
            <button onclick="calculateStrip()">计算板带重量</button>
        </div>

        <div id="result"></div>
    </div>

<script>
const stripSpecs = {
    "4.0": {thickness: 4.0, width: 62},
    "5.0": {thickness: 5.0, width: 70}
};

function switchTab(tabName) {
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
    document.querySelectorAll('.calc-section').forEach(section => section.classList.remove('active'));
    document.getElementById(tabName + 'Section').classList.add('active');
    event.target.classList.add('active');
}

function updateStripSize() {
    const spec = document.getElementById('stripType').value;
    document.getElementById('stripType').options[
        document.getElementById('stripType').selectedIndex
    ].text = `${spec}T×${stripSpecs[spec].width}mm`;
}

function calculatePlate() {
    const area = parseFloat(document.getElementById('area').value);
    const thickness = parseFloat(document.getElementById('thickness').value) || 1.5;
    const density = parseFloat(document.getElementById('material').value);
    
    if (!area || area <= 0) {
        alert("请输入有效的面积数值");
        return;
    }

    const baseWeight = area * density * thickness;
    const finalWeight = (baseWeight * 1.2).toFixed(2);
    
    showResult(`板材理论重量：${baseWeight.toFixed(2)}kg<br>含损耗(1.2)重量：${finalWeight}kg`);
}

function calculateStrip() {
    const length = parseFloat(document.getElementById('length').value);
    const spec = document.getElementById('stripType').value;
    const {thickness, width} = stripSpecs[spec];
    
    if (!length || length <= 0) {
        alert("请输入有效的长度数值");
        return;
    }

    // 计算逻辑：长度(m) × 宽度(m) × 厚度(m) × 密度 × 损耗
    const baseWeight = length * (width/1000) * (thickness/1000) * 7930; // 7.93g/cm³=7930kg/m³
    const finalWeight = (baseWeight * 1.1).toFixed(2);
    
    showResult(`板带理论重量：${baseWeight.toFixed(2)}kg<br>含损耗(1.1)重量：${finalWeight}kg`);
}

function showResult(html) {
    document.getElementById('result').innerHTML = `<div class="result-box">${html}</div>`;
}
</script>
</body>
</html>